<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 通用的工具栏 -- 其他页面也会使用这个组件，所以不要写当前文件夹里面，应该写通用组件文件 components里面 -->
      <page-tools>
        <!-- #left -->
        <template v-slot:left>
          当前页面数据有40条
        </template>
        <template #right>
          <!-- 插槽： 往子组件里面 传递 html结构 -->
          <!-- props是往子组件里面 传递数据 -->
          <div>
            <el-button type="primary" size="mini">主要按钮</el-button>
            <el-button type="success" size="mini">成功按钮</el-button>
            <el-button type="info" size="mini">信息按钮</el-button>
            <el-button type="warning" size="mini">警告按钮</el-button>
          </div>
        </template>
      </page-tools>
      <!-- table表格 -->
      <el-table
        class="my-table"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />
        <el-table-column
          property="workNumber"
          label="工号"
          width="180"
        />
        <el-table-column
          property="formOfEmployment"
          label="聘用形式"
          width="180"
        >
          <template slot-scope="scope">
            <div @click="fn(scope)">{{ transfromHireType(scope.row.formOfEmployment) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
          width="180"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          width="180"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
            >查看</el-button>
            <el-button
              size="mini"
              type="primary"
            >分配角色</el-button>
            <el-button
              size="mini"
              type="danger"
            >删除</el-button>
          </template>
        </el-table-column></el-table>
      <!-- 分页插件 -->
      <el-pagination
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getUserListRequest } from '@/api/employees'
import globalConstant from '@/constant/employees'

// 第一种： 数组查找法
function test(id) {
  // 数组里面查找元素  find
  const item = globalConstant.hireType.find(item => item.id === id)
  if (item) {
    return item.value
  } else {
    return '临时工'
  }
}
// 第二种： 对象取值法 （核心就是将数组转换为对象）
function test2(id) {
  const obj = {}
  globalConstant.hireType.forEach(item => {
    // item = {id:1, value: '正式'}
    obj[item.id] = item.value
    // 不要使用 obj.1  只能obj.name  原因就是对象的key只能使用字符串 --- 新数据结构 Map
    // obj.'1'
    // obj.name  obj.'name'
    // obj['1'] = '正式'
    console.log(obj)
  })

  return obj[id] ? obj[id] : '临时工'
}
console.log(test2(1))

export default {
  data() {
    return {
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10
      },
      total: 0
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    fn(aa) {
      console.log(aa)
    },
    async getUserList() {
      try {
        const res = await getUserListRequest(this.pageInfo)
        if (res.success) {
          this.total = res.data.total
          this.tableData = res.data.rows
        }
      } catch (error) {
        this.$message.error('获取员工列表失败')
      }
    },
    handleSizeChange() {},
    handleCurrentChange(value) {
      // 参数就是当前页码值
      console.log(value)
      // 在js里面 将数据page的值 手动赋值为 当前最新的页码值， 再发请求
      this.pageInfo.page = value
      this.getUserList()
    },
    transfromHireType(id) {
      // 数组里面查找元素  find
      // const item = globalConstant.hireType.find(item => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '临时工'
      // }

      const obj = {}
      globalConstant.hireType.forEach(item => {
        obj[item.id] = item.value
      })

      return obj[id] ? obj[id] : '临时工'
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  margin-top: 20px;
}
</style>
